<template>
  <header class="head">
      <el-button type="primary">+ 新建</el-button>
      <div class="head-right">
          <div class="head-select">
              <el-select placeholder="请选择测试题目类型" v-model="search.type" clearable>
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
          </div>
          <div class="head-input">
              <el-input @keyup.enter="searchTable" @clear="searchTable" clearable v-model="search.value" placeholder="请输入关键字搜索">
                  <template #append>
                      <el-button icon="el-icon-search" @click="searchTable"></el-button>
                  </template>
              </el-input>
          </div>
      </div>
  </header>
  <section>
      <ele-table :tableTitleData="tableTitleData" :tableData="tableData" :loading="loading" :pageObj="pageObj" @onchangepage="changePage" >
          <template  #typeName="scope" >
              自定义slot:
              <span>{{scope.soltval.key}}</span>
          </template>
      </ele-table>
  </section>

</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs,onMounted } from "vue";
import eleTable from '@/components/ele-table/index.vue';

export default defineComponent({
  components:{
      eleTable
  },
setup(){
  const search = reactive({
    value:'',
    type:'',
    page:1,
    size:20,
    total:0
  })
  const loading = ref(true);
  const pageObj = ref({page:1,size:20,total:80})
  const options = reactive({
    options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }]
  })
  const tableTitleData = ref([
          { id: 1, label: '测试', slotname: 'typeName' },
          { id: 2, label: '测试2',align:'center' }
  ])
  const tableData = ref([
    { value: 3, key: '3-1' },
    { value: 4, key: '4-1'}
  ])
  const changePage = (val) =>{
    console.log(val)
  };
  const searchTable = () => {
    console.log(111)
  };
  onMounted(()=>{
    loading.value = false;
  })
  return{
    search,
    ...toRefs(options),
    loading,
    pageObj,
    tableTitleData,
    tableData,
    searchTable,
    changePage
  }
}
})
</script>

<style lang="scss" scoped>
@import 'index.scss';
</style>
